<template>
  <div class="background-container"></div>
  <video
    ref="video"
    src="http://localhost:8104/video/9c2978b9632f4887a3c0be39fc3f61a9.mp4"
    preload="metadata"
  ></video>
  <canvas ref="canvas" style="display: none"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue";

const video = ref(null);
const canvas = ref(null);

const setBackground = () => {
  const videoElement = video.value;
  const canvasElement = canvas.value;
  const ctx = canvasElement.getContext("2d");

  // 设置 canvas 尺寸与视频一致
  canvasElement.width = videoElement.videoWidth;
  canvasElement.height = videoElement.videoHeight;

  // 绘制视频的第一帧到 canvas
  ctx.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);

  // 将 canvas 内容作为背景图片
  document.querySelector(
    ".background-container"
  ).style.backgroundImage = `url(${canvasElement.toDataURL("image/png")})`;
};

onMounted(() => {
  // 确保视频元素已加载并触发 setBackground
  video.value.addEventListener("loadeddata", setBackground);
  // 触发视频加载
  video.value.load();
});
</script>

<style scoped>
.background-container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
